<template>
  <el-popover placement="bottom" :width="selectorWidth" trigger="focus" :visible="popoverVisible">
    <template #reference>
      <el-input ref="selectorInput" v-model="input1" placeholder="搜索图标" @focus="onInputFocus" @blur="onInputBlur" clearable>
        <template #prepend v-if="name">
          <div class="icon-prepend flex">
            <Icon :key="'icon' + name" :name="name" />
            <div class="name pl-5">{{ name }}</div>
          </div>
        </template>
        <template #append>
          <Icon @click="onInputRefresh" name="el-icon-RefreshRight" class="a-cursor" />
        </template>
      </el-input>
    </template>
    <div class="selector-body">
      <el-scrollbar ref="selectorScrollbarRef">
        <div v-if="renderFontIconNames.length > 0">
          <div v-for="(item, key) in renderFontIconNames" :key="key" :title="item.name"
               class="icon-selector-item" @click="onIcon(item)">
            <Icon :name="'icon-'+ item['font_class']"/>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted, ref, nextTick, computed } from 'vue'
import Icon from '@/components/icon/index.vue'
import {
  getAwesomeIconfontNames,
  getIconfontNames,
  getElementPlusIconfontNames,
  getLocalIconfontNames
} from '@/utils/iconfont'
import axios from "axios";
type IconType = 'ele' | 'awe' | 'ali' | 'local'
const defaultValue = 'el-icon-Minus'
const emit = defineEmits(['update:name'] as string[])
const props = defineProps({
  //icon名称
  name: {
    type: String,
    required: true,
    default: 'el-icon-Minus'
  },
})

const { name } = toRefs(props)

const state = reactive({
  //icon列表
  fontIconNames: [] as any,
  //input输入框绑定值
  input1: '',
  //popover宽度
  selectorWidth: 0,
  //popover显隐
  popoverVisible: false
})

const selectorInput = ref()
const { fontIconNames, input1, selectorWidth, popoverVisible } = toRefs(state)

const renderFontIconNames = computed(() => {
  console.log(state.fontIconNames);

  if (!state.input1) return state.fontIconNames

  let inputValue = state.input1.trim().toLowerCase()
  return state.fontIconNames.filter((icon: any) => {
    if (icon.name.toLowerCase().indexOf(inputValue) !== -1) {
      return icon
    }
  })
})

onMounted(() => {
  // if (!props.name) {
  //     onInputRefresh
  // }
  //自适应input宽度
  getInputWidth()
  // 获取icon列表
  // getIconfontNames().then((res) => {
  //   state.fontIconNames = res
  //   console.log(state.fontIconNames);
  //
  // })
  fn1()
})

const fn1 = () => {
  // 获取public下 data 文件夹中的test.json文件数据

  // 局部使用
  const service = axios.create({
    baseURL: '', // 请求本地json文件，那么baseURL取空字符串，域名就会是项目域名
    timeout: 30000,
  });
  return new Promise((resolve, reject) => {
    return service.get('iconfont' + '.json').then((res: any) => {
      console.log(res)
      state.fontIconNames = res.data?.glyphs || []
      console.log(state.fontIconNames);
    })
  })

}


// 获取 input 的宽度
const getInputWidth = () => {
  nextTick(() => {
    state.selectorWidth = selectorInput.value.$el.offsetWidth < 260 ? 260 : selectorInput.value.$el.offsetWidth
  })
}

//选中icon
const onIcon = (icon: string) => {
  emit('update:name', 'icon-' + icon['font_class'])
  nextTick(() => {
    selectorInput.value.blur()
  })
}

//input聚焦
const onInputFocus = () => {
  state.popoverVisible = true
}

//input失焦
const onInputBlur = () => {
  state.popoverVisible = false
}

//input重置
const onInputRefresh = () => {
  emit('update:name', defaultValue)
}
  </script>

<style scoped lang="scss" >
.selector-body {
  height: 250px;
}
.icon-selector-item {
  display: inline-block;
  padding: 10px 10px 6px;
  margin: 3px;
  border: 1px solid #f6f6f6;
  border-radius: var(--el-border-radius-base);
  cursor: pointer;
  font-size: 18px;
  box-sizing: border-box;
  outline: none !important;
  .icon {
    height: 18px;
    width: 18px;
  }
  &:hover {
    border: 1px solid var(--el-color-primary);
  }
}
</style>
